<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      * {
          padding: 0;margin: 0;
      }
    #box1 {
        width: 2000px;
        height: 1000px;
        border: 10px solid #dddddd;
        background: red;
        margin-left: 200px;
    }
  </style>
</head>
<body>
<div id="box1"></div>

<script>
  const box1 = document.getElementById('box1');
  // {
  //   "x": -755.3333740234375,
  //   "y": -600,
  //   "width": 2020, // 内容宽度 + 内边距宽度 + 边框宽度
  //   "height": 1020,
  //   "top": -600,
  //   "right": 1264.6666259765625,
  //   "bottom": 420,
  //   "left": -755.3333740234375
  // }

  // 除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。

  // 它获取的 width，height 是精确宽度（浮点数）
  console.log(box1.getBoundingClientRect());

  // 它获取的 width，height 是四舍五入整数
  console.log(box1.offsetWidth, box1.offsetHeight)
</script>
</body>
</html>